<template>
	<div class="finance-container">
		<div class="dataScreen" ref="dataScreenRef">
			<ScreenHeader :titleImg="postTitleImg"></ScreenHeader>
			<div class="property-main">
				<!-- 左边 -->
				<div class="dataScreen-lf">
					<div class="lf-top">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['年度经营状况']">
							<template #rightCnBox>
								<div class="select-box">
									<SelectTool
										:optionsArr="selectLeft[0]"
										:getWidth="'90'"
										:modelValue="1"
										@update:modelValue="(v) => fetchYearData(v, 'type')"
									></SelectTool>
									<SelectTool
										:optionsArr="selectLeft[1]"
										:getWidth="'90'"
										:modelValue="leftCondition.year"
										@update:modelValue="(v) => fetchYearData(v, 'year')"
									></SelectTool>
								</div>
							</template>
						</ItemTitle>
						<div v-if="leftCondition.type === 1" class="lf-top-cn">
							<div class="cn-top">
								<div class="line1">
									<img
										:src="rateImgArr['green']"
										alt=""
										style="width: 50px; height: 50px"
									/>
									<div>
										<span class="textColor">{{ rateObj.left[0].title }}：</span>
										<span class="numColor">{{ rateObj.left[0].value }}</span>
										<span class="numColor unit">%</span>
									</div>
								</div>
								<div class="line2">
									<div>
										<img
											:src="rateImgArr['yellow']"
											alt=""
											style="width: 50px; height: 50px"
										/>
										<div>
											<span class="textColor">
												{{ rateObj.left[1].title }}：
											</span>
											<span class="numColor color2">
												{{ rateObj.left[1].value }}
											</span>
											<span class="numColor unit">%</span>
										</div>
									</div>
									<div>
										<img
											:src="rateImgArr['red']"
											alt=""
											style="width: 50px; height: 50px"
										/>
										<div>
											<span class="textColor">
												{{ rateObj.left[2].title }}：
											</span>
											<span class="numColor color3">
												{{ rateObj.left[2].value }}
											</span>
											<span class="numColor unit">%</span>
										</div>
									</div>
								</div>
							</div>
							<div class="cn-bottom">
								<div class="option-box">
									<div
										v-for="item in lfArr"
										:class="{ active: activeObj.activeIndex1 === item.value }"
										@click="changeYearDeptFilter(item.value)"
									>
										<span>{{ item.title }}</span>
									</div>
								</div>
								<div class="echart-box">
									<leftChart1 ref="leftChart1Ref"></leftChart1>
								</div>
							</div>
						</div>
						<div v-if="leftCondition.type === 2" class="lf-top-cn">
							<div class="table-left" style="width: 100%; height: 100%">
								<scroll-board
									:config="configLeft"
									:style="{ width: '100%', height: leftHeight + 'px' }"
								></scroll-board>
							</div>
							<!-- <el-table
								:data="leftTopData2"
								style="width: 100%"
								class="table-box"
								header-row-class-name="table-head"
								row-class-name="table-row"
								:max-height="leftHeight"
							>
								<el-table-column prop="department" label="部门名称" />
								<el-table-column prop="income" label="收入">
									<template #default="scope">
										<span class="blueColor">
											{{ changeNumToWan(scope.row.income || 0) }}万元
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="expend" label="成本">
									<template #default="scope">
										<span class="blueColor">
											{{ changeNumToWan(scope.row.expend || 0) }}万元
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="profit" label="利润">
									<template #default="scope">
										<span class="yellowColor">
											{{ changeNumToWan(scope.row.profit || 0) }}万元
										</span>
									</template>
								</el-table-column>
							</el-table> -->
						</div>
						<div v-if="leftCondition.type === 3" class="lf-top-cn">
							<div class="table-left" style="width: 100%; height: 100%">
								<scroll-board
									:config="configLeft2"
									:style="{ width: '100%', height: leftHeight + 'px' }"
								></scroll-board>
							</div>
							<!-- <el-table
								:data="leftTopData3"
								style="width: 100%"
								class="table-box"
								header-row-class-name="table-head"
								row-class-name="table-row"
								:max-height="leftHeight"
							>
								<el-table-column prop="project" label="项目名称" />
								<el-table-column prop="income" label="收入">
									<template #default="scope">
										<span class="blueColor">
											{{ changeNumToWan(scope.row.income || 0) }}万元
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="expend" label="成本">
									<template #default="scope">
										<span class="blueColor">
											{{ changeNumToWan(scope.row.expend || 0) }}万元
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="profit" label="利润">
									<template #default="scope">
										<span class="yellowColor">
											{{ changeNumToWan(scope.row.profit || 0) }}万元
										</span>
									</template>
								</el-table-column>
							</el-table> -->
						</div>
					</div>
					<div class="lf-bottom">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['预测预算情况']">
						</ItemTitle>
						<div class="lf-bottom-cn">
							<leftChart2 ref="leftChart2Ref"></leftChart2>
						</div>
					</div>
				</div>
				<!-- 中间 -->
				<div class="dataScreen-ct">
					<div class="ct-top">
						<div class="top-select-box">
							<SelectTool
								:optionsArr="centerTopSelect"
								:getWidth="'100'"
								:modelValue="'1'"
								@update:modelValue="centerTopData"
							></SelectTool>
						</div>
						<div class="center-top-data">
							<div v-for="item in centerArr" class="line-item">
								<div class="lf-icon">
									<img
										src="@/assets/screenImg/projectImg/center/pic1.png"
										alt=""
									/>
								</div>
								<div class="ct-desc">
									<div class="img">
										<img :src="item.title" alt="" />
										<div v-show="item.sign">
											<img :src="getSign(item.sign)" alt="" />
											<span
												:style="{
													color: item.sign === 'up' ? '#10FF0E' : '#F50000',
												}"
											>
												{{ item.rate }}%
											</span>
										</div>
									</div>
									<div class="text">
										<span class="numColor">{{ item.value }}</span>
										<span class="num-unit m-l10">
											<img :src="getPic(item.sign)" alt="" />
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="ct-bottom">
						<ItemTitle
							:itemTitleImg="postItemTitleImgObj['历年汇总经营情况']"
							style="padding-right: 5%"
						>
							<template #rightCnBox>
								<div class="select-box">
									<SelectTool
										:optionsArr="selectCenter"
										:getWidth="'100'"
										:modelValue="1"
										@update:modelValue="(v) => fetchCenterData(v, 'type')"
									></SelectTool>
								</div>
							</template>
						</ItemTitle>
						<div class="ct-bottom-cn">
							<div class="cn-top">
								<div
									v-if="middleCenterCondition.type === 1"
									style="width: 100%; height: 100%"
									class="type1-box"
								>
									<div class="cn-top-lf">
										<div v-for="item in rateObj.center" class="item-box">
											<img
												:src="rateImgArr[item.color]"
												alt=""
												style="width: 50px; height: 50px"
											/>
											<div>
												<span class="textColor"> {{ item.title }}： </span>
												<span class="numColor color3">
													{{ item.value }}
												</span>
												<span class="numColor unit">%</span>
											</div>
										</div>
									</div>
									<div class="cn-top-rg">
										<div><leftPie ref="leftPieRef"></leftPie></div>
										<div><leftPie2 ref="leftPieRef2"></leftPie2></div>
										<div><leftPie3 ref="leftPieRef3"></leftPie3></div>
										<div><leftPie4 ref="leftPieRef4"></leftPie4></div>
										<div><leftPie5 ref="leftPieRef5"></leftPie5></div>
									</div>
								</div>
								<div
									class="table-center"
									v-if="middleCenterCondition.type === 2"
									style="width: 100%; height: 100%"
								>
									<scroll-board
										:config="configCenter"
										:style="{ width: '100%', height: centerHeight + 'px' }"
									></scroll-board>
									<!-- <el-table
										:data="tableCenterData"
										style="width: 100%"
										class="table-box"
										header-row-class-name="table-head"
										row-class-name="table-row"
										:max-height="centerHeight"
									>
										<el-table-column prop="department" label="子公司" />
										<el-table-column prop="ratio_liabilitie" label="资产负债率">
											<template #default="scope">
												<span class="blueColor">
													{{
														Math.round(100 * (scope.row.ratio_liabilitie || 0))
													}}%
												</span>
											</template>
										</el-table-column>
										<el-table-column
											prop="net_assets_income_rate"
											label="净资产收益率"
										>
											<template #default="scope">
												<span class="blueColor">
													{{
														Math.round(
															100 * (scope.row.net_assets_income_rate || 0)
														)
													}}%
												</span>
											</template>
										</el-table-column>
										<el-table-column prop="manage_cost_rate" label="管理费用率">
											<template #default="scope">
												<span class="blueColor">
													{{
														Math.round(100 * (scope.row.manage_cost_rate || 0))
													}}%
												</span>
											</template>
										</el-table-column>
										<el-table-column prop="period_cost_tare" label="期间费用率">
											<template #default="scope">
												<span class="blueColor">
													{{
														Math.round(100 * (scope.row.period_cost_tare || 0))
													}}%
												</span>
											</template>
										</el-table-column>
										<el-table-column prop="return_rate" label="回款率">
											<template #default="scope">
												<span class="blueColor">
													{{ Math.round(100 * (scope.row.return_rate || 0)) }}%
												</span>
											</template>
										</el-table-column>
									</el-table> -->
								</div>
							</div>
							<div class="cn-bottom">
								<div class="option-box">
									<div
										v-for="item in ctArr"
										:class="{ active: activeObj.activeIndex2 === item.value }"
										@click="changeMiddleDeptFilter(item.value)"
									>
										<span>{{ item.title }}</span>
									</div>
								</div>
								<div class="echart-box">
									<centerChart ref="centerChartRef"></centerChart>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 右边 -->
				<div class="dataScreen-rg">
					<div class="rg-top">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['季度经营情况']">
							<template #rightCnBox>
								<div class="select-box">
									<SelectTool
										:optionsArr="selectRight[0]"
										:getWidth="'90'"
										:modelValue="1"
										@update:modelValue="(v) => fetchQuarterData(v, 'type')"
									></SelectTool>
									<SelectTool
										:optionsArr="selectRight[1]"
										:getWidth="'90'"
										:modelValue="1"
										@update:modelValue="(v) => fetchQuarterData(v, 'quarter')"
									></SelectTool>
								</div>
							</template>
						</ItemTitle>
						<div v-if="rightCondition.type === 1" class="rg-top-cn">
							<div class="cn-top">
								<div class="top-top-cn">
									<div class="line1">
										<img
											:src="rateImgArr['green']"
											alt=""
											style="width: 50px; height: 50px"
										/>
										<div>
											<span class="textColor">收入达成率：</span>
											<span class="numColor">
												{{ Math.round(100 * (rightTopData.income_rate || 0)) }}
											</span>
											<span class="numColor unit">%</span>
										</div>
									</div>
									<div class="line2">
										<div>
											<img
												:src="rateImgArr['yellow']"
												alt=""
												style="width: 50px; height: 50px"
											/>
											<div>
												<span class="textColor"> 成本达成率： </span>
												<span class="numColor color2">
													{{
														Math.round(100 * (rightTopData.expend_rate || 0))
													}}
												</span>
												<span class="numColor unit">%</span>
											</div>
										</div>
										<div>
											<img
												:src="rateImgArr['red']"
												alt=""
												style="width: 50px; height: 50px"
											/>
											<div>
												<span class="textColor"> 利润达成率： </span>
												<span class="numColor color3">
													{{
														Math.round(100 * (rightTopData.profit_rate || 0))
													}}
												</span>
												<span class="numColor unit">%</span>
											</div>
										</div>
									</div>
								</div>
								<div class="top-bottom-cn">
									<div><rightPie ref="rightPieRef"></rightPie></div>
									<div><rightPie2 ref="rightPieRef2"></rightPie2></div>
									<div><rightPie3 ref="rightPieRef3"></rightPie3></div>
									<div><rightPie4 ref="rightPieRef4"></rightPie4></div>
									<div><rightPie5 ref="rightPieRef5"></rightPie5></div>
								</div>
							</div>
							<div class="cn-bottom">
								<div class="option-box">
									<div
										v-for="item in rgArr"
										:class="{ active: activeObj.activeIndex3 === item.value }"
										@click="changeQuarterFilter(item.value)"
									>
										<span>{{ item.title }}</span>
									</div>
								</div>
								<div class="echart-box">
									<rightChart ref="rightChartRef"></rightChart>
								</div>
							</div>
						</div>
						<div v-if="rightCondition.type === 2" class="rg-top-cn">
							<div class="table-right" style="width: 100%; height: 100%">
								<scroll-board
									:config="configRight"
									:style="{ width: '100%', height: rightHeight + 'px' }"
								></scroll-board>
								<!-- <el-table
									:data="rightTopData2"
									style="width: 100%"
									class="table-box"
									header-row-class-name="table-head"
									row-class-name="table-row"
									:max-height="rightHeight"
								>
									<el-table-column prop="department" label="部门名称" />
									<el-table-column prop="income" label="收入">
										<template #default="scope">
											<span class="blueColor">
												{{ changeNumToWan(scope.row.income || 0) }}万元
											</span>
										</template>
									</el-table-column>
									<el-table-column prop="expend" label="成本">
										<template #default="scope">
											<span class="blueColor">
												{{ changeNumToWan(scope.row.expend || 0) }}万元
											</span>
										</template>
									</el-table-column>
									<el-table-column prop="profit" label="利润">
										<template #default="scope">
											<span class="yellowColor">
												{{ changeNumToWan(scope.row.profit || 0) }}万元
											</span>
										</template>
									</el-table-column>
								</el-table> -->
							</div>
						</div>
						<div v-if="rightCondition.type === 3" class="rg-top-cn">
							<div class="table-right" style="width: 100%; height: 100%">
								<scroll-board
									:config="configRight2"
									:style="{ width: '100%', height: rightHeight + 'px' }"
								></scroll-board>
								<!-- <el-table
									:data="rightTopData3"
									style="width: 100%"
									class="table-box"
									header-row-class-name="table-head"
									row-class-name="table-row"
									:max-height="rightHeight"
								>
									<el-table-column prop="project" label="项目名称" />
									<el-table-column prop="income" label="收入">
										<template #default="scope">
											<span class="blueColor">
												{{ changeNumToWan(scope.row.income || 0) }}万元
											</span>
										</template>
									</el-table-column>
									<el-table-column prop="expend" label="成本">
										<template #default="scope">
											<span class="blueColor">
												{{ changeNumToWan(scope.row.expend || 0) }}万元
											</span>
										</template>
									</el-table-column>
									<el-table-column prop="profit" label="利润">
										<template #default="scope">
											<span class="yellowColor">
												{{ changeNumToWan(scope.row.profit || 0) }}万元
											</span>
										</template>
									</el-table-column>
								</el-table> -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue";
import ScreenHeader from "../components/ScreenHeader";
import { getScale, calcHeight } from "../utils/handelScreen";
import ItemTitle from "../finance/components/ItemTitle.vue";
import SelectTool from "../components/SlecetTool";
import { ElTable } from "element-plus";
import { ScrollBoard } from "@kjgl77/datav-vue3";
import { changeNumToWan } from "../utils/handelScreen";

import leftChart1 from "./components/leftChartOne.vue";
import leftChart2 from "./components/leftChartTwo.vue";
import centerChart from "./components/centerChart.vue";
import rightChart from "./components/rightChart.vue";

import leftPie from "./components/pieCharts/leftPie.vue";
import leftPie2 from "./components/pieCharts/leftPieTwo.vue";
import leftPie3 from "./components/pieCharts/leftPieThree.vue";
import leftPie4 from "./components/pieCharts/leftPieFour.vue";
import leftPie5 from "./components/pieCharts/leftPieFive.vue";

import rightPie from "./components/rightPieCharts/rightPie.vue";
import rightPie2 from "./components/rightPieCharts/rightPieTwo.vue";
import rightPie3 from "./components/rightPieCharts/rightPieThree.vue";
import rightPie4 from "./components/rightPieCharts/rightPieFour.vue";
import rightPie5 from "./components/rightPieCharts/rightPieFive.vue";
import {
	year_all,
	quarter_pro,
	quarter_dp,
	year_dp,
	year_pro,
	quarter_all,
} from "./service.js";

const postTitleImg = require("@/assets/screenImg/operateImg/headTitle.png");
const postItemTitleImgObj = reactive({
	年度经营状况: require("@/assets/screenImg/operateImg/title1.png"),
	预测预算情况: require("@/assets/screenImg/operateImg/title2.png"),
	历年汇总经营情况: require("@/assets/screenImg/operateImg/title3.png"),
	季度经营情况: require("@/assets/screenImg/operateImg/title4.png"),
});
const currentYear = new Date().getFullYear();

let selectLeft = ref([
	[
		{
			label: "全公司",
			value: 1,
		},
		{
			label: "各部门",
			value: 2,
		},
		{
			label: "各项目",
			value: 3,
		},
	],
	[
		{ label: "2023", value: "2023" },
		{ label: "2022", value: "2022" },
	],
]);
let selectCenter = ref([
	{
		label: "全公司",
		value: 1,
	},
	{
		label: "子公司",
		value: 2,
	},
]);
let selectRight = ref([
	[
		{
			label: "全公司",
			value: 1,
		},
		{
			label: "各部门",
			value: 2,
		},
		{
			label: "各项目",
			value: 3,
		},
	],
	[
		{
			label: "一季度",
			value: 1,
		},
		{
			label: "二季度",
			value: 2,
		},
		{
			label: "三季度",
			value: 3,
		},
		{
			label: "四季度",
			value: 4,
		},
	],
]);

let leftHeight = ref();
let centerHeight = ref();
let rightHeight = ref();

let getSign = (i) => {
	let img = ref({
		upImg: require("@/assets/screenImg/commonImg/up.png"),
		downImg: require("@/assets/screenImg/commonImg/down.png"),
	});
	if (i === "up") {
		return img.value.upImg;
	} else if (i === "down") {
		return img.value.downImg;
	}
};
let getPic = (i) => {
	let img = ref({
		price: require("@/assets/screenImg/financeImg/left/unit.png"),
		rate: require("@/assets/screenImg/financeImg/left/rate.png"),
	});
	if (i) {
		return img.value.price;
	} else {
		return img.value.rate;
	}
};

let rateImgArr = reactive({
	green: require("@/assets/screenImg/operateImg/greenCircle.gif"),
	yellow: require("@/assets/screenImg/operateImg/yellowCircle.gif"),
	red: require("@/assets/screenImg/operateImg/redCircle.gif"),
});
let rateObj = ref({
	left: [
		{
			title: "收入达成率",
			value: 0,
		},
		{
			title: "成本达成率",
			value: 0,
		},
		{
			title: "利润达成率",
			value: 0,
		},
	],
	center: [
		{
			title: "收入达成率",
			value: 0,
			color: "green",
		},
		{
			title: "成本达成率",
			value: 0,
			color: "yellow",
		},
		{
			title: "利润达成率",
			value: 0,
			color: "red",
		},
	],
});

let lfArr = ref([
	{ title: "收入", value: 0 },
	{ title: "成本", value: 1 },
	{ title: "利润", value: 2 },
]);
let ctArr = ref([
	{ title: "收入", value: 0 },
	{ title: "成本", value: 1 },
	{ title: "利润", value: 2 },
]);
let rgArr = ref([
	{ title: "收入", value: 0 },
	{ title: "成本", value: 1 },
	{ title: "利润", value: 2 },
]);
let activeObj = ref({
	activeIndex1: 0,
	activeIndex2: 0,
	activeIndex3: 0,
});
let tableCenterData = ref([]);

const leftChart1Ref = ref();
const leftChart2Ref = ref();
const centerChartRef = ref();
const rightChartRef = ref();

const leftPieRef = ref();
const leftPieRef2 = ref();
const leftPieRef3 = ref();
const leftPieRef4 = ref();
const leftPieRef5 = ref();

const rightPieRef = ref();
const rightPieRef2 = ref();
const rightPieRef3 = ref();
const rightPieRef4 = ref();
const rightPieRef5 = ref();

const screenChartObj = reactive({
	chart1: null,
	chart2: null,
	chart3: null,
	chart5: null,
	//  饼图
	chart4: null,
	chart6: null,
	chart7: null,
	chart8: null,
	chart9: null,
	chart10: null,
	chart11: null,
	chart12: null,
	chart13: null,
	chart14: null,
});
const initAllCharts = () => {
	screenChartObj.chart2 = leftChart2Ref.value?.initChart();
};

const dataScreenRef = ref(null);
const screenResize = () => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
	}
};
onMounted(() => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
		dataScreenRef.value.style.width = `1920px`;
		dataScreenRef.value.style.height = `1080px`;
		window.addEventListener("resize", screenResize);
		nextTick(() => {
			initAllCharts();
			fetchYearData();
			fetchQuarterData();
			fetchCenterData();
		});
	}
});
onBeforeUnmount(() => {
	window.removeEventListener("resize", screenResize);
});

let changeYearDeptFilter = (type) => {
	activeObj.value.activeIndex1 = type;
	const arr1 = [],
		arr2 = [],
		arr3 = [];
	chart1AllData.value.map((item) => {
		const {
			income,
			income_budget,
			department,
			expend,
			expend_budget,
			profit,
			profit_budget,
		} = item;
		arr1.push(department);
		if (type === 0) {
			arr2.push(changeNumToWan(income));
			arr3.push(changeNumToWan(income_budget));
		}
		if (type === 1) {
			arr2.push(changeNumToWan(expend));
			arr3.push(changeNumToWan(expend_budget));
		}
		if (type === 2) {
			arr2.push(changeNumToWan(profit));
			arr3.push(changeNumToWan(profit_budget));
		}
	});
	screenChartObj.chart1 = leftChart1Ref.value?.initChart(arr1, arr2, arr3);
};

// 表格轮播
let configLeft = ref({
	header: [
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">部门名称</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">收入</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">成本</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">利润</span>`,
	],
	headerBGC: "rgba(21, 77, 160, 0.2)",
	data: [],
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	align: new Array(4).fill("center"),
	rowNum: 7,
});
let configLeft2 = ref({
	header: [
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">项目名称</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">收入</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">成本</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">利润</span>`,
	],
	headerBGC: "rgba(21, 77, 160, 0.2)",
	data: [],
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	align: new Array(4).fill("center"),
	rowNum: 7,
});
let configCenter = ref({
	header: [
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">子公司</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">资产负债率</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">净资产收益率</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">管理费用率</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">期间费用率</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">回款率</span>`,
	],
	headerBGC: "rgba(21, 77, 160, 0.2)",
	data: [],
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	align: new Array(6).fill("center"),
	rowNum: 5,
});
let configRight = ref({
	header: [
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">部门名称</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">收入</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">成本</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">利润</span>`,
	],
	headerBGC: "rgba(21, 77, 160, 0.2)",
	data: [],
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	align: new Array(4).fill("center"),
	rowNum: 15,
});
let configRight2 = ref({
	header: [
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">项目名称</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">收入</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">成本</span>`,
		`<span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;">利润</span>`,
	],
	headerBGC: "rgba(21, 77, 160, 0.2)",
	data: [],
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	align: new Array(4).fill("center"),
	rowNum: 15,
});

// 左侧中间部分数据
let chart1AllData = ref([]);

// 选择各部门 - 表格数据
let leftTopData2 = ref([]);

// 选择各项目 - 表格数据
let leftTopData3 = ref([]);

// 顶部查询条件
let leftCondition = ref({
	type: 1,
	year: currentYear,
});

const fetchYearData = (val, key) => {
	val && key && (leftCondition.value[key] = val);
	const { type, year } = leftCondition.value;
	if (type === 1) {
		year_all({ year })
			.then((resp) => {
				const { income_rate = 0, expend_rate = 0, profit_rate = 0 } = resp;
				rateObj.value.left[0].value = Math.round(100 * income_rate);
				rateObj.value.left[1].value = Math.round(100 * expend_rate);
				rateObj.value.left[2].value = Math.round(100 * profit_rate);
			})
			.catch((e) => {});
		year_dp({ year })
			.then((resp = []) => {
				chart1AllData.value.splice(0);
				chart1AllData.value.push(...resp);
				changeYearDeptFilter(0);
			})
			.catch((e) => {});
	}
	if (type === 2) {
		nextTick(() => {
			leftHeight.value = calcHeight("table-left");
			console.log(calcHeight("table-left"));
		});
		year_dp({ year })
			.then((resp = []) => {
				leftTopData2.value.splice(0);
				leftTopData2.value.push(...resp);
				configLeft.value.data = resp.map((item) => {
					return [
						`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216,240,255,0.8);">${item.department}</span>`,
						`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #40C5F1;">
              ${changeNumToWan(item.income || 0)}万元</span>`,
						`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #40C5F1;">
					  ${changeNumToWan(item.expend || 0)}万元</span>`,
						`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #FFDA3A;">
					  ${changeNumToWan(item.profit || 0)}万元</span>`,
					];
				});
			})
			.catch((e) => {});
	}
	if (type === 3) {
		nextTick(() => {
			leftHeight.value = calcHeight("table-left");
		});
		year_pro({ year })
			.then((resp = []) => {
				leftTopData3.value.splice(0);
				leftTopData3.value.push(...resp);
				configLeft2.value.data = resp.map((item) => {
					return [
						`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216,240,255,0.8);">${item.project}</span>`,
						`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #40C5F1;">
              ${changeNumToWan(item.income || 0)}万元</span>`,
						`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #40C5F1;">
					  ${changeNumToWan(item.expend || 0)}万元</span>`,
						`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #FFDA3A;">
					  ${changeNumToWan(item.profit || 0)}万元</span>`,
					];
				});
			})
			.catch((e) => {});
	}
};

// 右侧中间部分数据
let rightAllData = ref([]);
// 右侧中间部分筛选
let changeQuarterFilter = (type) => {
	activeObj.value.activeIndex3 = type;
	const arr1 = [],
		arr2 = [],
		arr3 = [];
	rightAllData.value.map((item) => {
		const {
			income,
			income_budget,
			department,
			expend,
			expend_budget,
			profit,
			profit_budget,
		} = item;
		arr1.push(department);
		if (type === 0) {
			arr2.push(changeNumToWan(income));
			arr3.push(changeNumToWan(income_budget));
		}
		if (type === 1) {
			arr2.push(changeNumToWan(expend));
			arr3.push(changeNumToWan(expend_budget));
		}
		if (type === 2) {
			arr2.push(changeNumToWan(profit));
			arr3.push(changeNumToWan(profit_budget));
		}
	});
	rightChartRef.value?.initChart(arr1, arr2, arr3);
};
// 右侧 - 全公司
let rightTopData = ref({
	expend: 0,
	expend_budget: 0,
	expend_rate: 0,
	income: 0,
	income_budget: 0,
	income_rate: 0,
	manage_cost_rate: 0,
	net_assets_income_rate: 0,
	period_cost_tare: 0,
	profit: 0,
	profit_budget: 0,
	profit_rate: 0,
	ratio_liabilitie: 0,
	return_rate: 0,
});

// 右侧 - 各部门
let rightTopData2 = ref([]);

// 右侧 - 各项目
let rightTopData3 = ref([]);

let rightCondition = ref({
	type: 1,
	quarter: 1,
	year: currentYear,
});
const fetchQuarterData = (val, key) => {
	val && (rightCondition.value[key] = val);
	const { type, year, quarter } = rightCondition.value;
	if (type === 1) {
		quarter_all({ year, quarter })
			.then((resp) => {
				rightTopData.value = resp || {};
				resetPieChart(resp);
			})
			.catch((e) => {});
		quarter_dp({ year, quarter }).then((resp = []) => {
			rightAllData.value.splice(0);
			rightAllData.value.push(...resp);
			changeQuarterFilter(0);
		});
	}
	if (type === 2) {
		quarter_dp({ year, quarter }).then((resp = []) => {
			rightTopData2.value.splice(0);
			rightTopData2.value.push(...resp);
			configRight.value.data = resp.map((item) => {
				return [
					`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216,240,255,0.8);">${item.department}</span>`,
					`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #40C5F1;">
              ${changeNumToWan(item.income || 0)}万元</span>`,
					`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #40C5F1;">
					  ${changeNumToWan(item.expend || 0)}万元</span>`,
					`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #FFDA3A;">
					  ${changeNumToWan(item.profit || 0)}万元</span>`,
				];
			});
		});
		nextTick(() => {
			rightHeight.value = calcHeight("table-right");
		});
	}
	if (type === 3) {
		quarter_pro({ year, quarter }).then((resp = []) => {
			rightTopData3.value.splice(0);
			rightTopData3.value.push(...resp);
			configRight2.value.data = resp.map((item) => {
				return [
					`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216,240,255,0.8);">${item.project}</span>`,
					`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #40C5F1;">
              ${changeNumToWan(item.income || 0)}万元</span>`,
					`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #40C5F1;">
					  ${changeNumToWan(item.expend || 0)}万元</span>`,
					`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #FFDA3A;">
					  ${changeNumToWan(item.profit || 0)}万元</span>`,
				];
			});
		});
		nextTick(() => {
			rightHeight.value = calcHeight("table-right");
		});
	}
};
const resetPieChart = (t) => {
	screenChartObj.chart10 = rightPieRef.value?.initPieChart(
		t.ratio_liabilitie ?? 0
	);
	screenChartObj.chart11 = rightPieRef2.value?.initPieChart(
		t.net_assets_income_rate ?? 0
	);
	screenChartObj.chart12 = rightPieRef3.value?.initPieChart(
		t.manage_cost_rate ?? 0
	);
	screenChartObj.chart13 = rightPieRef4.value?.initPieChart(
		t.period_cost_tare ?? 0
	);
	screenChartObj.chart14 = rightPieRef5.value?.initPieChart(t.return_rate ?? 0);
};

// 中间顶部下拉框
let centerTopSelect = ref([
	{
		label: "收入",
		value: "1",
	},
	{
		label: "成本",
		value: "2",
	},
	{
		label: "利润",
		value: "3",
	},
]);
// 中间 - 顶部数据
const middleCenterTopDataSet = ref({});
const middleCenterTopShow = ref({
	type: "1",
	d1: 0,
	d2: 0,
	d3: 0,
});
let centerArr = ref([
	{
		src: require("@/assets/screenImg/projectImg/center/pic1.png"),
		title: require("@/assets/screenImg/operateImg/name1.png"),
		value: 20000,
		sign: "up",
		rate: 0,
	},
	{
		src: require("@/assets/screenImg/projectImg/center/pic1.png"),
		title: require("@/assets/screenImg/operateImg/name2.png"),
		value: 0,
	},
]);
let centerTopData = (val) => {
	middleCenterTopShow.value.type = val;
	if (+val === 1) {
		const v = middleCenterTopDataSet.value.income_basis || 0;
		centerArr.value[0].rate = Math.round(100 * +v); //收入同比
		centerArr.value[0].sign = +v < 0 ? "down" : "up";
		centerArr.value[0].value = changeNumToWan(
			middleCenterTopDataSet.value.income_budget || 0
		); // 收入
		centerArr.value[1].value = Math.round(
			100 * (middleCenterTopDataSet.value.income_rate || 0)
		); // 收入达成率
	}
	if (+val === 2) {
		const v = middleCenterTopDataSet.value.expend_basis || 0;
		centerArr.value[0].rate = Math.round(100 * +v); //同比
		centerArr.value[0].sign = +v < 0 ? "down" : "up";
		centerArr.value[0].value = changeNumToWan(
			middleCenterTopDataSet.value.expend_budget || 0
		);
		centerArr.value[1].value = Math.round(
			100 * (middleCenterTopDataSet.value.expend_rate || 0)
		);
	}
	if (+val === 3) {
		const v = middleCenterTopDataSet.value.profit_basis || 0;
		centerArr.value[0].rate = Math.round(100 * +v); //同比
		centerArr.value[0].sign = +v < 0 ? "down" : "up";
		centerArr.value[0].value = changeNumToWan(
			middleCenterTopDataSet.value.profit_budget || 0
		);
		centerArr.value[1].value = Math.round(
			100 * (middleCenterTopDataSet.value.profit_rate || 0)
		);
	}
};
// 中间 - 查询条件
const middleCenterCondition = ref({
	type: 1,
	year: currentYear,
});
// 中间 - 全公司
const middleCenterData1 = ref([]);
const fetchCenterData = (val, key) => {
	val && key && (middleCenterCondition.value[key] = val);
	const { type, year } = middleCenterCondition.value;
	if (type === 1) {
		year_all({ year })
			.then((resp) => {
				// console.log("resp===", resp)
				if (!middleCenterTopDataSet.value.year) {
					middleCenterTopDataSet.value = { ...resp };
					centerTopData("1");
				}
				const { income_rate = 0, expend_rate = 0, profit_rate = 0 } = resp;
				rateObj.value.center[0].value = Math.round(100 * income_rate);
				rateObj.value.center[1].value = Math.round(100 * expend_rate);
				rateObj.value.center[2].value = Math.round(100 * profit_rate);
				resetMiddlePieChart(resp);
			})
			.catch((e) => {});
		year_dp({ year })
			.then((resp = []) => {
				middleCenterData1.value.splice(0);
				middleCenterData1.value.push(...resp);
				changeMiddleDeptFilter(0);
			})
			.catch((e) => {});
	}
	if (type === 2) {
		nextTick(() => {
			centerHeight.value = calcHeight("table-center");
		});
		year_dp({ year })
			.then((resp = []) => {
				tableCenterData.value.splice(0);
				tableCenterData.value.push(...resp);
				configCenter.value.data = resp.map((item) => {
					return [
						`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216,240,255,0.8);">${item.department}</span>`,
						`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #40C5F1;">
              ${Math.round(100 * (item.ratio_liabilitie || 0))}%</span>`,
						`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #40C5F1;">
              ${Math.round(100 * (item.net_assets_income_rate || 0))}%</span>`,
						`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #40C5F1;">
              ${Math.round(100 * (item.manage_cost_rate || 0))}%</span>`,
						`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #40C5F1;">
              ${Math.round(100 * (item.period_cost_tare || 0))}%</span>`,
						`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #40C5F1;">
              ${Math.round(100 * (item.return_rate || 0))}%</span>`,
					];
				});
			})
			.catch((e) => {});
	}
};

const changeMiddleDeptFilter = (type) => {
	activeObj.value.activeIndex2 = type;
	const arr1 = [],
		arr2 = [],
		arr3 = [];
	middleCenterData1.value.map((item) => {
		const {
			income,
			income_budget,
			department,
			expend,
			expend_budget,
			profit,
			profit_budget,
		} = item;
		arr1.push(department);
		if (type === 0) {
			arr2.push(changeNumToWan(income));
			arr3.push(changeNumToWan(income_budget));
		}
		if (type === 1) {
			arr2.push(changeNumToWan(expend));
			arr3.push(changeNumToWan(expend_budget));
		}
		if (type === 2) {
			arr2.push(changeNumToWan(profit));
			arr3.push(changeNumToWan(profit_budget));
		}
	});
	centerChartRef.value?.initChart(arr1, arr2, arr3);
};
const resetMiddlePieChart = (t) => {
	leftPieRef.value?.initPieChart(t.ratio_liabilitie ?? 0);
	leftPieRef2.value?.initPieChart(t.net_assets_income_rate ?? 0);
	leftPieRef3.value?.initPieChart(t.manage_cost_rate ?? 0);
	leftPieRef4.value?.initPieChart(t.period_cost_tare ?? 0);
	leftPieRef5.value?.initPieChart(t.return_rate ?? 0);
};
</script>
<style lang="scss" scoped>
@import "./operate.scss";
</style>
